<!-- 底图按钮 -->
<template>
  <div class="base-layer tool-item">
    <i class="iconfont map-administrative" />
    <el-dropdown @command="handleCommand">
      <span class="el-dropdown-link">
        {{ name }}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown" class="basemap-dropdown-menu">
        <el-dropdown-item
          v-for="(item, index) in layers"
          :key="index"
          :command="item.id"
        >
          {{ item.displayName }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script lang="ts">
import { Component, Watch } from "vue-property-decorator";
import Template from "./CTemplate.vue";
@Component({ name: "BaseLayer" })
export default class extends Template {
  // 二维底图
  get baseLayer2d() {
    const data = JSON.parse(
      JSON.stringify(this.$store.getters["view/baseLayer2d"])
    );
    data.forEach((el: any) => {
      el.layers = el.children.map((el: any) => {
        return el.mapLayer;
      });
    });
    return data;
  }

  layers: any[] = [];

  private name: string = "";

  private active: { id: string; name: string; ids: string[] } | null = null;

  // 2d显示地图
  private active2d: { id: string; name: string; ids: string[] } | null = null;

  // 二维底图变化
  @Watch("baseLayer2d")
  handle2dChange() {
    this.handleShow2dChange();
  }

  handleShow2dChange() {
    this.layers = this.baseLayer2d;
    const active = this.active2d;
    let id = "";
    if (active) {
      id = active.id;
    } else if (this.layers.length > 0) {
      id = this.layers[0].id;
    }
    if (id) this.activeItem(id);
  }

  // 下拉项点击
  handleCommand(id: string) {
    this.activeItem(id);
    // 控制底图显示
    this.setBaseLayerVisible();
  }

  // 激活项
  activeItem(id: string) {
    const items = this.layers.filter(el => {
      return el.id === id;
    });
    if (items.length > 0) {
      const name = items[0].displayName;
      const ids = items[0].layers.map((el: any) => {
        return el.id;
      });
      this.active = { id, name, ids };
      this.active2d = this.active;

      this.name = name;
    }
  }

  // 设置底图显示
  setBaseLayerVisible() {
    if (!this.active) return;
    const ids = this.active.ids;
    const view = this.view;
    const map = view.map;
    const basemap = map.basemap;
    const baseLayers = basemap.baseLayers;
    baseLayers.forEach((el: any) => {
      el.visible = ids.includes(el.id);
    });
  }
}
</script>

<style lang="scss">
.base-layer {
  .el-dropdown {
    color: white !important;
  }
}
.basemap-dropdown-menu {
  border: none;
  background-color: rgba(11, 51, 93, 0.95);
  box-shadow: 0px 0px 8px 0px rgba(0, 19, 41, 0.8);
  border-radius: 4px;
  border-radius: 8px;
  padding: 10px 8px;
  .popper__arrow::after {
    border-top-color: rgba(11, 51, 93, 0.95) !important;
    border-bottom-color: rgba(11, 51, 93, 0.95) !important;
  }
  .el-dropdown-menu__item {
    border-radius: 8px;
    line-height: 32px;
    padding: 0 10px;
    font-size: 14px;
    font-family: AlibabaPuHuiTi_2_45_Light;
    color: #fff;
  }

  .el-dropdown-menu__item:focus,
  .el-dropdown-menu__item:not(.is-disabled):hover {
    background-color: transparent;
    background-size: 100% 100%;
    background-image: url(../../assets/images/panels/xialakuangxuanzhongshibeijing.png);
    color: #3998ff;
  }
}
</style>
